<template>
  <div :class="classes">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    split: {
      validator(value) {
        return ["vertical", "horizontal"].indexOf(value) >= 0;
      },
      required: true,
    },
    className: String,
  },
  computed: {
    classes() {
      const classes = ["splitter-pane-resizer", this.split, this.className];
      return classes.join(" ");
    },
  },
};
</script>

<style scoped>
.splitter-pane-resizer {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: #000;
  position: absolute;
  opacity: 0.2;
  z-index: 1;
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
  overflow: hidden;
}

.splitter-pane-resizer.horizontal {
  height: 10px;
  margin: -5px 0 0 5px;
  border-top: none;
  border-bottom: none;
  cursor: row-resize;
  width: calc(100% - 5px);
  opacity: 1;
  background-color: rgb(232, 234, 237);
}

.splitter-pane-resizer .line_btn {
  width: 100%;
  height: 100%;
  user-select: none;
}

.splitter-pane-resizer .line_btn .splitDom {
  width: 100%;
  height: 100%;
}

.splitter-pane-resizer.horizontal .line_btn .button_action_list {
  position: absolute;
  top: -5px;
  width: 100%;
  height: 10px;
}

.splitter-pane-resizer.horizontal .line_btn .first {
  height: 10px;
  cursor: pointer;
}
.splitter-pane-resizer.horizontal .line_btn .second {
  height: 10px;
  cursor: pointer;
  transform: rotate(180deg);
}

.splitter-pane-resizer.vertical {
  width: 10px;
  height: 100%;
  margin-left: -5px;
  border-left: none;
  border-right: none;
  cursor: col-resize;
  opacity: 1;
  background-color: rgb(232, 234, 237);
}

.splitter-pane-resizer.vertical .line_btn .button_action_list {
  position: absolute;
  top: 50%;
  width: 10px;
  transform: translateY(-50%);
}

.splitter-pane-resizer.vertical .line_btn .button_action_list .first {
  width: 10px;
  cursor: pointer;
}
.splitter-pane-resizer.vertical .line_btn .button_action_list .second {
  width: 10px;
  cursor: pointer;
  transform: rotate(180deg);
}
</style>
